<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" :inline="false" size="normal">
      <el-form-item label="菜单类型">
        <el-radio v-model="radio" :label="0">顶级目录</el-radio>
        <el-radio v-model="radio" :label="1">菜单</el-radio>
        <el-radio v-model="radio" :label="2">按钮</el-radio>
      </el-form-item>
      <el-form-item v-if="radio != 0" label="上级菜单">
        <el-cascader
          v-model="form.pid"
          :options="list"
          :props="{ checkStrictly: true ,label:'title',value:'id'}"
          clearable
        />

      </el-form-item>
      <el-form-item label="路由名称">
        <el-input v-model="form.name" />

      </el-form-item>
      <el-form-item label="路径">
        <el-input v-model="form.path" />

      </el-form-item>
      <el-form-item label="组件路径">
        <el-input v-model="form.component" />

      </el-form-item>
      <el-form-item label="重定向">
        <el-input v-model="form.redirect" />

      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="form.sort" />

      </el-form-item>
      <el-form-item label="是否隐藏">
        <el-radio v-model="form.hidden" :label="false" @change="">否</el-radio>
        <el-radio v-model="form.hidden" :label="true" @change="">是</el-radio>

      </el-form-item>
      <el-form-item label="是否展开">
        <el-radio v-model="form.alwaysShow" :label="false" @change="">否</el-radio>
        <el-radio v-model="form.alwaysShow" :label="true" @change="">是</el-radio>

      </el-form-item>
      <el-form-item label="meta属性">
        <div v-for="(item,index) in form.meta" :key="index" style="display:flex;align-items:center">
          <el-input v-model="item.key" />
          <el-input v-model="item.value" />

        </div>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {
  save
} from '@/api/auth/permission'
import {
  findAllPermissions,
  saveRolePermissions
} from '@/api/auth/roles'
export default {
  data() {
    return {
      list: [],
      radio: 0,
      form: {
        'alwaysShow': '',
        'children': [
        ],
        'component': '',
        'createTime': '',
        'hidden': '',
        'icon': '',
        'id': '',
        'isDeleted': '',
        'isSelect': '',
        'level': '',
        'meta': [
          {
            key: 'title',
            value: '商品管理'
          },
          {
            key: 'icon',
            value: 'el-icon-menu'
          }
        ],
        'modifyTime': '',
        'name': '',
        'path': '',
        'permissionValue': '',
        'pid': '',
        'redirect': '',
        'sort': '',
        'status': '',
        'title': '',
        'type': ''
      }
    }
  },
  computed: {

  },
  created() {
    findAllPermissions()
      .then(res => {
        this.delChildren(res.data.menus)
        this.list = res.data.menus
      })
  },
  mounted() {

  },
  methods: {
    delChildren(arr) {
      if (!Array.isArray(arr)) {
        return
      }
      arr.forEach(ele => {
        if (ele.type == 2) {
          delete ele.children
          ele.disabled = true
        } else {
          this.delChildren(ele.children)
        }
      })
    },
    onSubmit() {
      var params = JSON.parse(JSON.stringify(this.form))
      var obj = {}
      params.meta.forEach(ele => {
        obj[ele.key] = ele.value
      })
      params.meta = JSON.stringify(obj)
      //  pid 只要 菜单类型是顶级目录 固定传"0" 否则传递选择的下拉框的id
      this.radio == 0 ? (params.pid = '0', params.level = 0) : (params.pid = params.pid[params.pid.length - 1], params.level = 1)
      // type 只要选择的是顶级目录和菜单 固定传1 否则传2
      // type 只要选择的是顶级目录和菜单 固定传1 否则传2
      this.radio != 2 ? params.type = 1 : params.type = 2
      console.log(params)
      save(params)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
